<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8">

		<script>
			window.onload = init;
			
			function init() {
				for (var i=0; i<document.getElementsByTagName("div").length;i++) {
					var div = document.getElementsByTagName("div")[i];
					if (div.id != "etiqueta") { 
						div.onmouseover = ponerRojo;
						div.onmouseout = ponerAzul;
					}
				}
				document.onmouseover = ponerRojo;
				document.onmouseout = ponerAzul;

				document.getElementsByTagName("p")[0].onmousemove = posicionRaton;
				document.getElementsByTagName("p")[0].onmouseout = function() {
					var etiqueta = document.getElementById("etiqueta");
					etiqueta.style.display = "none";
				}
				
				tamanoTexto();
				var texto = document.getElementsByTagName("input")[0];
				texto.addEventListener("keyup",aMayusculas);
				texto.addEventListener("keyup",ajustarTamano);
				
				document.getElementsByTagName("form")[0].onsubmit = function (e) {
					var texto = document.getElementsByTagName("input")[0];
					if (texto.value) {
						//document.getElementsByTagName("form")[0].submit();
						return true;
					} else {
						return false;
					}
				}
				/*texto.onkeypress = function () {
					return false;
				}*/
				
				window.onbeforeunload = function() {					
						return "¿Quiere abandonar la página?";
				}
				
				texto.oncontextmenu = function () {
					return false;
				}
				
				var texto2 = document.getElementsByTagName("input")[1];
				var otroDiv = document.getElementById("otroDiv");
				texto2.onchange = function () {					
					otroDiv.innerHTML = "El input tiene <i>" + texto2.value + "</i>" 
				};
				
				texto2.onfocus = function () {
					texto2.value = texto.value;
					setCaretPosition(texto2,0,texto2.value.length);
				};
				
			}

			function ponerRojo(e) {				
				//console.log(e.target);				
				e.target.style.color = "red";
				e.stopPropagation();
			}

			function ponerAzul(e) {
				//console.log(e.target);
				e.target.style.color = "blue";
				e.stopPropagation();
			}

			function posicionRaton(e) {
				//console.log(e.screenX + "," + e.screenY);
				var etiqueta = document.getElementById("etiqueta");
				etiqueta.style.display = "table";
				etiqueta.textContent = "x=" + e.screenX + ",y=" + e.screenY;
				etiqueta.style.left = e.clientX  + "px";
				etiqueta.style.top = e.clientY - 20 + "px";
			}

			function tamanoTexto() {
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				ctx.font = "40px Book Antiqua";
				var txt = "HOLA"
				ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50)
				ctx.fillText(txt, 10, 100);
				var texto = document.getElementsByTagName("input")[0];
				texto.value = txt;
				texto.style.width = ctx.measureText(txt).width + "px";
				
			}

			function ajustarTamano(event) {
				var texto = document.getElementsByTagName("input")[0];
				var c = document.getElementById("myCanvas");
				var ctx = c.getContext("2d");
				ctx.font = "40px Book Antiqua";
				var txt = texto.value;
				texto.style.width = ctx.measureText(txt).width + 10 + "px";
			}

			function getCaretPosition(ctrl) {
				var CaretPos = 0;
				// IE Support
				if (document.selection) {
					ctrl.focus();
					var Sel = document.selection.createRange();
					Sel.moveStart('character', -ctrl.value.length);
					CaretPos = Sel.text.length;
				}
				// Firefox support
				else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
					CaretPos = ctrl.selectionStart;
				}

				return CaretPos;
			}

			function setCaretPosition(ctrl, pos,fin) {
				if (!fin) {
						fin = pos;
					}				
				if (ctrl.setSelectionRange) {
					ctrl.focus();					
					ctrl.setSelectionRange(pos, fin);
				} else if (ctrl.createTextRange) {
					var range = ctrl.createTextRange();
					range.collapse(true);
					range.moveEnd('character', fin);
					range.moveStart('character', pos);
					range.select();
				}
			}
			
			function aMayusculas(event) {
				console.log("keyCode=" + event.keyCode);
				console.log("witch=" + event.witch);
				var texto = document.getElementsByTagName("input")[0];
				var caretPosition = getCaretPosition(texto);
				this.value = this.value.toUpperCase();
				setCaretPosition(this, caretPosition);
			}
			
			

		</script>

		<style>
			div {
				display: table;
				color: blue;
			}

			p {
				width: 100%;
				height: 200px;
				text-align: center;
				line-height: 200px;
				background-color: yellow;
			}

			#etiqueta {
				display: none;
				background-color: green;
				color: yellow;
				position: absolute;
			}

			input {
				font-family: "Book Antiqua";
				font-size: 40px;
			}
		</style>

		<title>Eventos Java script</title>

	</head>
	<body>
		Inicio del Body
		<div>
			Estás en el DIV 1
		</div>
		<div>
			Estás en el DIV 2
		</div>
		<p>
			Estas en el DIV 3
		</p>
		<div id="etiqueta"></div>
		<form action="http://www.google.es">
			<input type="text" value="cambia el texto"/>
			<input value="otro"/>
		</form>
		<div id="otroDiv">Aqui</div>

		<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
			Your browser does not support the HTML5 canvas tag.
		</canvas>
		
		Fin del Body
	</body>
</html>
